<template>
  <li class="type1" :class="{'nth2': (idx + 1) % 4 == 0}" @mouseover="f1" @mouseout="f2">
    <nuxt-link target="_blank" :to="{ name: 'course-id', params: { id: obj.id } }" :title="obj.courseName">
      <div class="cbox">
        <div class="pic picCourse">
          <img :src="obj.courseLogo" onerror="this.src='/images/default.jpg'" style="margin-top: 0px;">
        </div>
        <div class="text clearfix " style="">
          <div class="infor">
            <p class="p1" style="width:100%" v-html="obj.courseName" />
            <p class="p2" style="padding-right:0;">
              <span>{{ obj.lecturerName }}</span>
              <span>{{ obj.lecturerSchool }}</span>
              <span v-if="false" class="pull-right">7<i class="iconfont"></i></span>
            </p>
          </div>
        </div>
      </div>
    </nuxt-link>
  </li>
</template>
<script>
export default {
  props: {
    obj: {
      type: Object,
      default: null
    },
    idx: {
      type: Number,
      default: -1
    }
  },
  methods: {
    f1(event) {
      const parent = event.currentTarget
      parent.style.height = '206px'
      parent.querySelectorAll('.pic')[0].style.height = '100%'
      parent.querySelectorAll('.pic')[0].style.transform = 'scale(1.4)'
      parent.querySelectorAll('.cbox')[0].style.border = '1px solid #dfdfdf'
      parent.querySelectorAll('.cbox')[0].style.borderRadius = '8px'
      parent.querySelectorAll('.text')[0].style.display = 'none'
    },
    f2(event) {
      const parent = event.currentTarget
      parent.removeAttribute('style')
      parent.querySelectorAll('.pic')[0].removeAttribute('style')
      parent.querySelectorAll('.cbox')[0].removeAttribute('style')
      parent.querySelectorAll('.text')[0].style.display = 'block'
    }
  }
}
</script>
